<template>
    <div class="bigBox" v-show="!showDetail">
        <div class="body">
            <div class="imgs">
                <ImgList :imgList="imgList" @viewPicture="viewPicture" :loading="loading"></ImgList>
            </div>
        </div>
        <div @click="goPexels" class="provider">图片由Pexels官方提供</div>
        <el-pagination size="small" background layout="prev, pager, next" :page-size="size" :total="total"
            class="pagination" @change="changePage" />
    </div>
    <Detail v-if="showDetail" @closePicture="closePicture" :urls="imgList" :index="index">
    </Detail>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { getPexelsImgs } from '@renderer/api/mohu'
import ImgList from '@renderer/components/imgList.vue'
import Detail from '@renderer/components/detail.vue'
import _ from 'lodash'
import { imgSourceStore } from '@renderer/store/imageSource'
const { shell } = require('electron')

const store = imgSourceStore()

const loading = ref(false)
const page = ref(1)
const size = ref(100)
const imgList: any = ref([])
const index = ref(0)
const showDetail = ref(false)
const total = ref(0)

const getNetImgList = async () => {
    imgList.value = []
    loading.value = true
    const obj = {
        page: page.value,
        per_page: size.value,
        key: store.$state.PexelsKey
    }
    const res = await getPexelsImgs(obj)
    total.value = res.total_results
    res.photos.forEach((item: any) => {
        const obj = {
            title: item.photographer,
            src: item.src.large,
            source: item.src.original
        }
        imgList.value.push(obj)
    })
    loading.value = false
}

const viewPicture = (num: number) => {
    index.value = num
    showDetail.value = true
}
const closePicture = () => {
    showDetail.value = false
}
const changePage = (num: number) => {
    page.value = num
    getNetImgList()
}
const goPexels = () => {
    shell.openExternal('https://www.pexels.com/api/')
}
onMounted(() => {
    getNetImgList()
})
onBeforeUnmount(() => {

})
</script>

<style scoped lang="scss">
.bigBox {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;

    .body {
        width: 100%;
        height: 100vh;
        display: grid;


        .imgs {
            overflow-y: auto;
            @include mixin.scroll_bar();
        }
    }

    .pagination {
        position: absolute;
        bottom: 10px;
        right: 20px;
        z-index: 1000;
    }

    .provider {
        position: absolute;
        bottom: 10px;
        left: 20px;
        z-index: 1000;
        color: white;
        cursor: pointer;
        background: linear-gradient(to right, #808080aa, #80808058);
        font-weight: bold;
        font-size: 12px;
        padding: 2px 5px;
        border-radius: 2px;
    }
}
</style>